import React, { useState } from 'react';
import Header from './header/header.jsx';
import Body from './body/body.jsx';
import { Divider } from "antd";
import nameContext from "./nameContext.js";

/*
  * context: 用来处理 爷孙组件传值, 甚至是祖孙组件传值
*/

function ContextComponent() {
  let [user, setUser] = useState('Dell Lee')
  return (
    <div style={{ width: '100%' }}>
      <nameContext.Provider value={user}>
        <Divider />
        <h1>Context</h1>
        {/* 向header组件中传递dom值 */}
        <Header>
          <div>this is content</div>
        </Header>
        {/* context嵌套时，组件获取到的值采用就近原则 */}
        <nameContext.Provider value="hello world">
          <Body />
        </nameContext.Provider>
      </nameContext.Provider>
    </div>
  )
}

export default ContextComponent;